*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
.px2rem(@name, @px) {
    @{name}: @px / 108 * 1rem;
}
.txh {
    display: flex;
    display: -webkit-flex;
}





.main{
    background: #f3f2f2;
   .txh();
   position: absolute;
   left: 0;
   .px2rem(top,120);
   width: 100%;
   justify-content: center;
   
   .section{
       .txh();
       width: 80%;
       flex-direction: column;
       justify-content: center;
       ul{
           .px2rem(margin-top,120);
           .px2rem(margin-bottom,35);
           border: 1px #ccc solid;
           background: white;
           border-radius: 15px;
           li{
               .txh();
               align-items: center;
               .px2rem(height,150);
               div{
                   .px2rem(width,160);
                   .px2rem(height,140);
                   .txh();
                   justify-content: center;
                   align-items: center;
                   img{
                       .px2rem(width,75);
                   }
               }
               input{
                   width: 70%;
                   border: none;
                   .px2rem(height,149);
                   .px2rem(font-size,44);
                   border-bottom: 1px #ccc solid;
                   outline: none;
               }
               
           }
           li:nth-child(2){
               div{
                   img{
                       .px2rem(width,55);
                   }
               }
               input{
                   border-bottom: none;
               }
           }
       }
       >a{
           .px2rem(height,136);
           text-align: center;
           .px2rem(line-height,136);
           .px2rem(font-size,55);
           color: white;
           background: #fc5b6a;
           .px2rem(margin-top,28);
           .px2rem(border-radius,15);
       }
       >a:nth-child(3){
           background: #25252f;
       }
       p{
           .px2rem(font-size,47);
           text-align: center;
           .px2rem(margin-top,200);
           font-weight: bolder;
       }
       .qitadl{
           .txh();
           flex-direction: row;
           justify-content: center;
           span{
               .txh();
               width: 35%;
               .px2rem(margin-top,115);
               justify-content: center;
               align-items: center;
               flex-direction: column;
               img{
                   .px2rem(width,192);
                   
               }
               b{
                   .px2rem(font-size,42);
                   font-weight: bolder;
                   color: #868a92;
                   .px2rem(margin-top,40);
               }
           }
       }
   }
   #container{
       .txh();
       ul{
           .txh();
           flex: 1;
           .px2rem(margin-left,20);
           flex-direction: column;
           li{
                .px2rem(margin-bottom,30);
               img{
                   width: 100%;
               }
           }
       }
   }
    
}

